<template>
  <div>
    <el-table
      ref="tableList"
      :data="list"
      row-key="id"
      border
      height="600"
      style="width: 100%">
      <el-table-column
        v-for="(item, index) in table_column"
        :label="item.label"
        :min-width="item.minWidth"
        :key="'col' + item.valueKey">
        <template slot-scope="scope">
          <div v-if="item.prop === 'status'">
            <el-switch
              v-model="scope.row[item.valueKey]"
              active-color="#13ce66"
              inactive-color="#606266"
              @change="rowChangeStatus(scope.$index, scope.row[item.valueKey])">
            </el-switch>
          </div>
          <div v-else>
            {{ scope.row[item.valueKey] }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        min-width="15%">
        <template slot-scope="scope">
          <el-tooltip content="移除" placement="bottom" effect="light">
            <el-button
              @click.native.prevent="rowDel(scope.$index)"
              size="small"
              type="danger"
              icon="el-icon-delete">
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Sortable from '_sortablejs@1.15.0@sortablejs'

export default {
  name: 'TableList',
  props: {
    // eslint-disable-next-line vue/prop-name-casing
    list_data: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: []
    },
    columnsText: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: []
    }
  },
  watch:{
    list_data:{
      deep:true,
      immediate: true,
      handler(val) {
        console.log(val);
        this.list = JSON.parse(JSON.stringify(this.list_data))
      }
    }
  },
  data() {
    return {
      table_column: this.columnsText,
      list:[]
    }
  },
  mounted() {
    var that = this
    this.$nextTick(function() {
      that.rowDrag()
    })
  },
  methods: {
    rowChangeStatus(index, statusValue) {
      // var data = JSON.parse(JSON.stringify(this.list_data))
      const _this = this
      var data = _this.list_data
      this.$emit('changeItemStatus', { index, statusValue })
    },
    rowDel(index) {
      const _this = this
      var item = _this.list_data.splice(index, 1)
      var data = _this.list_data
      this.$emit('changeList', { 'list': data, 'item': item[0] })
    },
    rowDrag() {
      var tableList = this.$refs.tableList.$el
      const tbody = tableList.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        animation: 150, // 拖拽延时
        onEnd({ oldIndex, newIndex }) {
          console.log('拖动了行', '拖动前序号: '+ oldIndex, '拖动后序号: ' + newIndex)
          // var data = JSON.parse(JSON.stringify(_this.list_data))
          var data = _this.list_data
          const currRow = data.splice(oldIndex, 1)[0]
          data.splice(newIndex, 0, currRow)

          _this.$emit('changeList', { 'list': data, 'item': null })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
